<svelte:options immutable={true} />

<script lang="ts">
  import Time, { svelteTime } from "svelte-time";
  import { tooltip } from "$lib/js/tooltip";
  import { request, gql } from "graphql-request";

  import { actixGraphqlEndpoint } from "$lib/js/stores";
  import { useQuery } from "@sveltestack/svelte-query";

  import TaskQuizItem from "$lib/tasks/completed/TaskQuizItem.svelte";
  import TaskFreeStyle from "$lib/tasks/completed/TaskFreeStyle.svelte";
  import TaskQuiz from "$lib/tasks/completed/TaskQuiz.svelte";

  import type { TaskType } from "$lib/ebm";
  export let objAttributes = {};

  let endpoint = $actixGraphqlEndpoint;

  const TASKS_QUERY = gql`
    query {
      tasks: listTasks {
        id
        quizItemId
        createdAt
        updatedAt
        status
        from
        content {
          id
          createdAt
          updatedAt
          ... on QuizItem {
            __typename
            title
            description
            opstype
            options {
              k
              v
            }
          }
        }
      }
    }
  `;

  const queryResult = useQuery<TaskType[], { message: string }>(
    "tasks",
    async () => {
      const { tasks } = await request(endpoint, TASKS_QUERY);
      return tasks;
    }
  );

  let filter = "all";
  let active = false;
</script>

<svelte:head>
  <title>Ebbinghaus Tasks</title>
</svelte:head>

<div class="w-full items-center">
  <h1 class="text-xl my-2">Update Difficulty For Tasks</h1>

  <div class="w-full grid grid-cols-1 sm:grid-cols-2 ">
    <div
      class="border-l border-t border-r sm:border-b border-blue-500 text-light-blue-600 font-medium text-left"
    >
      <p class="h-full px-2">
        A Long and Winding Tour of the History of UI Frameworks and Tools and
        the Impact on Design
        <span class="text-gray-500 text-sm"
          >(Last quizzed <Time
            relative
            timestamp={new Date(115156000 * 1000)}
          />)</span
        >
      </p>
    </div>
    <div
      class="text-light-blue-600 font-medium grid grid-cols-9 items-center  justify-center"
    >
      <!-- Small -->
      <button
        class="text-purple-500 bg-transparent border-l border-t border-b sm:border-l-0 border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Remembered"
      >
        R
      </button>
      <button
        class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Easy +2"
      >
        E2
      </button>
      <button
        class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Easy +1"
      >
        E1
      </button>

      <button
        class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Easy"
      >
        E
      </button>

      <button
        class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Normal"
      >
        N
      </button>

      <button
        class="text-purple-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Difficult"
      >
        D
      </button>
      <button
        class="text-purple-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Difficult +1"
      >
        D1
      </button>
      <button
        class="text-purple-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Difficult +2"
      >
        D2
      </button>

      <button
        class="text-white bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white bg-purple-600 font-bold uppercase text-lg px-2 py-2  outline-none focus:outline-none ease-linear transition-all duration-150"
        type="button"
        use:tooltip={{ theme: "light" }}
        title="Change to Oderous"
      >
        O
      </button>
    </div>
  </div>

  <table class="table-auto w-full mt-4">
    <thead>
      <tr class="bg-gray-500">
        <th class="border border-blue-500 w-3/5 text-center text-light-blue-600"
          >Task Title</th
        >
        <th class="border border-blue-500 w-2/5 text-center text-light-blue-600"
          >Difficulty</th
        >
      </tr>
    </thead>
    <tbody>
      <tr>
        <td
          class="border border-blue-500 px-2 text-light-blue-600 font-medium text-left"
          ><p class="line-clamp-2">
            A Long and Winding Tour of the History of UI Frameworks and Tools
            and the Impact on Design
          </p></td
        >
        <td class="border border-blue-500 p-2 text-light-blue-600 font-medium">
          <!-- Small -->
          <div class="grid grid-cols-5 items-center  justify-center">
            <button
              class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 rounded-l outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              R
            </button>
            <button
              class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              E
            </button>
            <button
              class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              N
            </button>
            <button
              class="text-purple-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              D
            </button>
            <button
              class="text-white bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white bg-purple-600 font-bold uppercase text-lg px-2 py-2 rounded-r outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              O
            </button>
          </div>
        </td>
      </tr>

      <tr>
        <td
          class="border border-blue-500 px-2 text-light-blue-600 font-medium text-left"
          ><p class="line-clamp-2">
            A Long and Winding Tour of the History of UI Frameworks and Tools
            and the Impact on Design
          </p></td
        >
        <td class="border border-blue-500 p-2 text-light-blue-600 font-medium">
          <!-- Small -->
          <div class="flex items-center  justify-center">
            <button
              class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xs px-2 py-2 rounded-l outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              <i
                class="fas fa-check-circle font-bold text-xl text-green-500 "
              />
            </button>
            <button
              class="text-white bg-transparent border-t border-b border-l border-purple-500 hover:bg-purple-500 hover:text-white bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              E
            </button>
            <button
              class="text-purple-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              N
            </button>
            <button
              class="text-purple-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xl px-2 py-2 rounded-r outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              D
            </button>
          </div>
        </td>
      </tr>

      <tr class="bg-light-blue-200">
        <td
          class="border border-blue-500 px-2 text-light-blue-600 font-medium text-left"
          ><p class="line-clamp-2">
            A Long and Winding Tour of the History of UI Frameworks and Tools
            and the Impact on Design
          </p>
        </td>
        <td class="border border-blue-500 p-2 text-light-blue-600 font-medium"
          ><!-- Small -->
          <div class="flex items-center  justify-center">
            <button
              class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xs px-2 py-2 rounded-l outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              <i
                class="fas fa-times-circle font-bold text-xl text-green-500 "
              />
            </button>
            <button
              class="text-gray-500 bg-transparent border-t border-b border-l border-purple-500 hover:bg-purple-500 hover:text-white font-bold uppercase text-xl px-2 py-2 outline-none mb-1 ease-linear "
            >
              E
            </button>
            <button
              class="text-gray-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white font-bold uppercase text-xl px-2 py-2 outline-none mb-1 ease-linear"
            >
              N
            </button>
            <button
              class="text-gray-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white font-bold uppercase text-xl px-2 py-2 rounded-r outline-none mb-1 ease-linear "
            >
              D
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td
          class="border border-blue-500 px-2 text-light-blue-600 font-medium text-left"
          >Intro to JavaScript</td
        >
        <td class="border border-blue-500 p-2 text-light-blue-600 font-medium">
          <!-- Small -->
          <div class="flex items-center  justify-center">
            <button
              class="text-purple-500 bg-transparent border-l border-t border-b border-purple-500 hover:bg-purple-500 hover:text-white active:bg-purple-600 font-bold uppercase text-xs px-2 py-2 rounded-l outline-none focus:outline-none mb-1 ease-linear transition-all duration-150"
              type="button"
            >
              <i
                class="fas fa-times-circle font-bold text-xl text-green-500 "
              />
            </button>
            <button
              class="text-gray-500 bg-transparent border-t border-b border-l border-purple-500 hover:bg-purple-500 hover:text-white font-bold uppercase text-xl px-2 py-2 outline-none mb-1 ease-linear "
            >
              E
            </button>
            <button
              class="text-gray-500 bg-transparent border border-solid border-purple-500 hover:bg-purple-500 hover:text-white font-bold uppercase text-xl px-2 py-2 outline-none mb-1 ease-linear"
            >
              N
            </button>
            <button
              class="text-gray-500 bg-transparent border-t border-b border-r border-purple-500 hover:bg-purple-500 hover:text-white font-bold uppercase text-xl px-2 py-2 rounded-r outline-none mb-1 ease-linear "
            >
              D
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="items-center mx-auto py-2">
    <div class="grid grid-cols-4 sm:grid-cols-8 gap-1">
      {#if $queryResult.isLoading}
        Loading...
      {:else if $queryResult.isError}
        Error {$queryResult.error.message}
      {:else}
        {#each $queryResult.data as task, i (task.id)}
          {#if task.content && task.content.__typename === "QuizItem"}
            <TaskQuizItem {task} index={i} />
          {:else if task.content && task.content.__typename === "Quiz"}
            <TaskQuiz {task} index={i} />
          {:else}
            <TaskFreeStyle {task} index={i} />
          {/if}
        {/each}
      {/if}
    </div>
  </div>
</div>
